<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>师生一体化教考通系统</title>
    <!-- Font Awesome for icons -->
    <link rel="stylesheet"
          href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }

        .navbar {
            background-color: #337ab7;
            margin-bottom: 20px;
            border-radius: 0;
        }

        .navbar .navbar-brand,
        .navbar .nav > li > a {
            color: #fff;
        }

        .navbar .navbar-brand {
            font-size: 24px;
        }

        .navbar .nav > li > a:hover,
        .navbar .nav > li > a:focus {
            background-color: #286090;
        }

        .navbar .user-name {
            color: #fff;
            font-size: 18px;
            margin-top: 8px;
        }

        .content {
            padding: 20px;
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .form-inline .form-group {
            margin-right: 10px;
        }

        .form-inline .btn {
            margin-left: 10px;
        }

        .table-container {
            margin-top: 20px;
        }
    </style>
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#"><i class="fa fa-desktop"></i> 师生一体化教考通系统</a>
        </div>
        <ul class="nav navbar-nav">
            <li><a href={% url 'work_information_stu' %}>我的作业</a></li>
            <li><a href={% url 'test_information_stu' %}>我的考试</a></li>
            <li class="active"><a href={% url 'note_information_stu' %}>笔记信息</a></li>
            <li style="position: absolute;right:80px"><p class="navbar-text navbar-right user-name" style="text-align: center;margin-top: 17px" >王苏凯，你好！</p></li>
            <li style="position: absolute;right:10px; text-align: center "><a style="text-align: justify" href={% url 'load' %}  >退出</a></li>
        </ul>

    </div>
</nav>

<div class="container">
    <div class="content">
        <!-- Form: Student Information Search -->
        <form class="form-inline">

            <div class="form-group">
                <label for="exampleInputName2">笔记号</label>
                <input type="text" class="form-control" id="exampleInputName2" placeholder="离散数学">
            </div>
            <div class="form-group">
                <label for="exampleInputDate2">内容</label>
                <input type="file" class="form-control" id="exampleInputDate2" placeholder="">
            </div>
            <div class="form-group">
                <label for="exampleInputPlace2">截至日期</label>
                <input type="date" class="form-control" id="exampleInputPlace2" placeholder="">
            </div>

            <button type="submit" class="btn btn-primary">搜索</button>
            <button type="button" class="btn btn-success" data-toggle="modal" data-target="#editModal">添加</button>

        </form>

        <!-- Table: Student Information -->
        <div class="table-container">
            <table class="table table-striped">

                <tr>
                    <th>课程名</th>
                    <th>作业号</th>
                    <th>作业截至时间</th>

                </tr>

                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
            </table>
        </div>
    </div>
</div>


<!-- Edit Information Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="editModalLabel">上传</h4>
            </div>
            <div class="modal-body">
                <form id="editForm" action={% url 'note_information_stu' %}>
                    <div class="form-group">
                        <label for="editID">笔记号</label>
                        <input type="text" class="form-control" id="editID">
                    </div>
                    <div class="form-group">
                        <label for="file">笔记</label>
                        <input type="file" class="form-control" id="file">
                    </div>
                    <div class="form-group">
                        <label for="date">截至日期</label>
                        <input type="text" class="form-control" id="date">
                    </div>
                    <button type="submit" class="btn btn-primary">上传笔记</button>
                </form>
            </div>
        </div>
    </div>
</div>


<!-- Bootstrap JS (optional, for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>
